
<div id="sidebar" style="width:180px">
	
	<div class="event-item galle" style="margin-top:20px;padding:20px 10px">
		<a class="title" href="{$root}{$lang}/team" style=" font-weight:bold">{$team}</a>		
	</div>
	<div class="event-item galle" style="padding:20px 10px">
		<a class="title" href="{$root}{$lang}/findus" style="font-weight:bold">{$findus}</a>		
	</div>
	<div class="event-item galle" style="padding:20px 10px">
		<a class="title" href="{$root}{$lang}/member" style="color:#dd0000;font-weight:bold;">{$subc}</a>		
	</div>


 
</div>
<!-- end #sidebar -->
<div id="content" style="width:710px">
<form method="POST" action="" id="form" name=myForm> 
	<h2 style="margin:10px 0; font-size:27px">{$title}</h2>
	<div style="text-align:center">{$description}</div>
	<div class="warning" id="warning">{$warning}</div>
	<div class="app-info">
		<h3 class="app-title">{$app_info}&nbsp;(*)</h3>
		<div class="tr"  >
			<div class="input-item" style="width:34%;border-right:2px solid #666">
				{$username1}&nbsp; &nbsp; <input  oninput='text_count_changed("username1","",20);'  class="input"  type="text" name="username1" id="username1" value="" /> &nbsp;(*) 
			</div>
			<div class="input-item" style="width:31%;border-right:2px solid #666">
				{$password1} &nbsp; <input  onchange="checkPassword()" oninput='text_count_changed("password1","",20);' 
				size="14" class="input" type="password" id="password1" name="password1" value=""/> &nbsp;(*)  
			</div>
			<div class="input-item" style="width:31%">
				{$confirm1}  &nbsp; <input class="input" onchange='checkRePassword()' type="password" oninput='text_count_changed("repassword","",20);' id="repassword" name=repassword size="14" value=""/> &nbsp;(*) 
			</div>
		</div>
		<div class="tr">
			<div class="input-item" style="width:46%;border-right:2px solid #666">
				{$firstname1} &nbsp; <input onkeypress="return onKeyPressBlockNumbers(event);"  oninput='text_count_changed("firstname","",20);' class="input" type="text" id="firstname" name="firstname" value="" size="35" />
			</div>
			<div class="input-item" style="width:46%">
				{$lastname1} &nbsp; <input onkeypress="return onKeyPressBlockNumbers(event);" onkeypress="return onKeyPressBlockNumbers(event);"  oninput='text_count_changed("lastname","",20);' class="input" type="text" name="lastname" id="lastname" value="" size="35"/>
			</div>
		</div>
		
		<div class="tr">
			<div class="input-item" style="width:46%;border-right:2px solid #666;text-align:left">
				{$place_birth} &nbsp; <input onkeypress="return onKeyPressBlockNumbers(event);" oninput='text_count_changed("placebirth","",50);' class="input" type="text" name="placebirth" id="placebirth" value="" size="25"/>
			</div>
			<div class="input-item" style="width:51%;text-align:left">
				{$birthday}&nbsp; <font style="color:#999">(dd/mm/yyyy)</font> 
				<select name="day"  class="input" style="padding: 2px 0">
					<option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="4">04</option><option value="5">5</option>
					<option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="9">09</option><option value="10">10</option>
					<option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option>
					<option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
					<option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option>
					<option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
				</select>&nbsp;
				
				<select name="month"  class="input" style="padding: 2px 0">
					<option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option>
					<option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option>
					<option value="11">11</option><option value="12">12</option>
				</select>&nbsp;
				<select name="year"  class="input" style="padding: 2px 0">
					{$option}
				</select>&nbsp;
				
			</div>
			
		</div>
		
		<div class="tr"  >
			<div class="input-item" style="width:24%;border-right:2px solid #666">
				{$mobile} &nbsp; <input oninput='text_count_changed("mobile","",14);' class="input" type="text" name="mobile" id="mobile" value="" size="14"/>
			</div>
			<div class="input-item" style="width:35%;border-right:2px solid #666">
				{$lemail} &nbsp; <input class="input" oninput='text_count_changed("email","",30);' onchange="checkEmail()" type="text" name="email" id="email" value="" size="25"/> &nbsp;(*) 
			</div>
			<div class="input-item" style="width:35%">
				{$skype} &nbsp; <input oninput='text_count_changed("skype","",30);' class="input" type="text" name="skype" id="skype" value="" size="25"/>
			</div>
		</div>
		
		<div class="tr"  >
			<div class="input-item" style="width:100%;border-right:2px solid #666">
				{$current_address} &nbsp; <input class="input" type="text" name="address" id="address" value="" size="80"/>
			</div>			
		</div>
		<div class="tr">
			<div class="input-item" style="width:31%;border-right:2px solid #666">
				{$city} &nbsp; <input onkeypress="return onKeyPressBlockNumbers(event);" class="input" type="text" name="city" id="city"  value="" size="20"/>
			</div>
			<div class="input-item" style="width:27%;border-right:2px solid #666">
				{$country} &nbsp; <input onkeypress="return onKeyPressBlockNumbers(event);" class="input" type="text" name="country" id="country" value="" size="16"/>
			</div>
			<div class="input-item" style="width:35%">
				{$zipcode} &nbsp; <input class="input" type="text" id="zipcode" name="zipcode" value="" oninput='text_count_changed("zipcode","",6);'/>
			</div>
		</div>
		
		<div class="tr">
			<div class="input-item" style="width:19%;border-right:2px solid #666;padding:18px 5px">
				{$invol} 
			</div>
			<div class="input-item" style="width:17%;border-right:2px solid #666;text-align:center">
				&nbsp; <input class="input" checked="checked" type="radio" name="involvement" value="Organization Board" size="15"/><p style="margin:0">{$board}</p>
			</div>
			<div class="input-item" style="width:17%;border-right:2px solid #666;text-align:center">
				 &nbsp; <input class="input" type="radio" name="involvement" value="Active Member" size="15"/><p style="margin:0">{$active_member}</p>
			</div>
			<div class="input-item" style="width:17%;text-align:center;border-right:2px solid #666">
				 &nbsp; <input class="input" type="radio"  name="involvement" value="Intend Events " size="15"/><p style="margin:0">{$intent} </p>
			</div>
			<div class="input-item" style="width:17%;text-align:center">
				&nbsp; <input class="input" type="radio" name="involvement" value="Get Newsletters" size="15"/><p style="margin:0">{$get_news}</p>
			</div>
		</div>
		
		
	</div>
	
	<div class="app-info">
		<h3 class="app-title">{$pro_info} &nbsp;(*)</h3>
		<div class="tr">
			<div class="input-item" style="width:23%;text-align:center">
				&nbsp; <input class="input" checked="checked" type="radio" name="looking_job" id="looking_job" value="" size="15"/><p style="margin:0">{$entrep} </p>
			</div>
			<div class="input-item" style="width:23%;text-align:center">
				 &nbsp; <input class="input" type="radio" name="looking_job" value="" size="15"/><p style="margin:0">{$employee}</p>
			</div>
			<div class="input-item" style="width:23%;text-align:center;">
				 &nbsp; <input class="input" type="radio" name="looking_job" value="" size="15"/><p style="margin:0">{$find_job}</p>
			</div>
			<div class="input-item" style="width:23%;text-align:center">
				&nbsp; <input class="input" type="radio" name="looking_job" value="" size="15"/><p style="margin:0">{$retired}</p>
			</div>
		</div>
		
		<div class="tr">
			<div class="input-item" style="width:47%;border-right:2px solid #666">
				{$company} &nbsp; <input onkeypress="return onKeyPressBlockNumbers(event);" class="input" type="text" name="company" id="company" value="" size="38"/>
			</div>
			<div class="input-item" style="width:46%">
				{$position} &nbsp; <input onkeypress="return onKeyPressBlockNumbers(event);" class="input" type="text" name="position" id="position" value="" size="37"/>
			</div>
		</div>
		<div class="tr"  >
			<div class="input-item" style="width:100%;border-right:2px solid #666">
				{$industry} &nbsp; <input onkeypress="return onKeyPressBlockNumbers(event);" class="input" type="text" name="industry" id="industry" value="" size="80"/>
			</div>
		</div>
		<div class="tr"  >
			<div class="input-item" style="width:55%;border-right:2px solid #666">
				{$employ_address} &nbsp; <input class="input" type="text" name="employer_address" id="employer_address" value="" size="30"/>
			</div>
			<div class="input-item" style="width:42%">
				{$how_long} &nbsp; <input onkeypress="return onKeyPressBlockNumbers(event);" class="input" type="text" name="how_long" id="how_long" value="" size="20"/>
			</div>
		</div>
	</div>
	
	<div class="app-info">
		<h3 class="app-title">{$how}</h3>
		
		<div class="tr"  >
			<div class="input-item" style="width:96%">
				{$by_member} &nbsp; <input onkeypress="return onKeyPressBlockNumbers(event);" class="input" type="text" name="whom" id="whom" value="" size="75"/>
			</div>
		</div>
		<div class="tr">
			<div class="input-item" style="width:19%;border-right:2px solid #666;padding:18px 5px">
				{$medias} 
			</div>
			<div class="input-item" style="width:17%;border-right:2px solid #666;text-align:center">
				&nbsp; <input class="input" checked="checked" type="radio" name="how_know" value="" size="15"/><p style="margin:0">{$internet}</p>
			</div>
			<div class="input-item" style="width:17%;border-right:2px solid #666;text-align:center">
				 &nbsp; <input class="input" type="radio" name="how_know" value="" size="15"/><p style="margin:0">{$newspapers}</p>
			</div>
			<div class="input-item" style="width:17%;text-align:center;border-right:2px solid #666">
				 &nbsp; <input class="input" type="radio" name="how_know" value="" size="15"/><p style="margin:0">{$events_concerts}</p>
			</div>
			<div class="input-item" style="width:17%;text-align:center">
				&nbsp; <input class="input" type="radio" name="how_know" value="" size="15"/><p style="margin:0">{$contact_friends}</p>
			</div>
		</div>
		
	</div>
	
	<div style="text-align:center">
		&nbsp; <input type="submit" class="" name="cancel" value="{$cancel}"/>
		&nbsp; <input type="submit" class="" onclick="checkNull();load()" name="register" value="{$register}"/>
		
	</div>
	
	<div style="clear: both;">&nbsp;</div>
	</form>
</div>

<script type="text/javascript">
	function load(){
		if($('#warning').html() != ""){
			$('#form').submit(function(){
				return false;
			});
		}else{
			$('#form').submit(function(){
				return true;
			});
		}
	}
	function checkNull(){
		
		var password = $("#password1").val();
		var username = $("#username1").val();
		var email = $("#email").val()
		
		if(password == "" || username == "" || email == ""){
			$('#warning').html("{$null}");
			
		}else if(password != "" && username != "" && email != ""){
			$('#warning').html("");
		}
	}
	function text_counter(textfield_id,counter_id,count){
	  var count = parseInt(count);
	
	  document.getElementById(counter_id).innerHTML = count;
	
	  document.getElementById(textfield_id).onpropertychange = function(){
	      text_count_changed(textfield_id,counter_id,count);
	  }
	}
	function text_count_changed(textfield_id,counter_id,count){
	  if(count-parseInt(document.getElementById(textfield_id).value.length)<0){
	      document.getElementById(textfield_id).value = document.getElementById(textfield_id).value.substr(0,count);
	  }
	
	  
	}
	function checkPassword()
	{	
		var counter = document.myForm.password1.value.length;
	
		if(counter<6 || counter>20){
			$('#warning').html("Password is at least 6 characters, 20 characters max.");
		}else {
			$('#warning').html("");
		}
	   
	}
	function checkRePassword(){
		var counter = document.myForm.repassword.value.length;
		if(counter<6 || counter>20){
			$('#warning').html("Password is at least 6 characters, 20 characters max.");
			if(document.myForm.password1.value != document.myForm.repassword.value){
				$('#warning').html("You did not enter the same new password twice. Please re-enter your password.");
			}
		}else {
			if(document.myForm.password1.value != document.myForm.repassword.value){
				$('#warning').html("You did not enter the same new password twice. Please re-enter your password.");
			}else {
				$('#warning').html("");
			}
		}
		
	}
	function checkEmail()
	{
		if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($('#email').val())){
	    	$('#warning').html("");
		}else{
			$('#warning').html("Email is not valid.");
		} 
	}
	
	function onKeyPressBlockNumbers(e)
	{
		var key = window.event ? e.keyCode : e.which;
		var keychar = String.fromCharCode(key);
		reg = /\d/;
		return !reg.test(keychar);
	}
	
	 jQuery('#mobile').priceFormat({
	      prefix: '',
	      thousandsSeparator: '',
	      centsLimit: -1,
	      centsSeparator: '',
	  });
	 jQuery('#zipcode').priceFormat({
	      prefix: '',
	      thousandsSeparator: '',
	      centsLimit: -1,
	      centsSeparator: '',
	  });
	 
	 
	 
	 function keypress(e){
	 //Hàm dùng để ngăn người dùng nhập các ký tự khác ký tự số vào TextBox
	 var keypressed = null;

	     if (window.event)
	     {
	     	keypressed = window.event.keyCode; //IE
	     }
	     else
	     {
	   		keypressed = e.which; //NON-IE, Standard
	     }

	     if (keypressed < 48 || keypressed > 57)
	     { //CharCode của 0 là 48 (Theo bảng mã ASCII)
	     //CharCode của 9 là 57 (Theo bảng mã ASCII)

	         if (keypressed == 8 || keypressed == 127)
	         {//Phím Delete và Phím Back
	         return;
	         }
	     return false;
	     }
	 }
  $("#subcriptionForm").validate({
	  rules: {
		  email: {
	      	required: true,
	     	 email: true
	    }
	  }
	});
 </script>

 